@use '../themes' as *;

$class-prefix-button: st-button;

$font-color-main: #333;
$font-color-white: #fff;
$border-color: #e5e5e5;

.#{$class-prefix-button} {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: auto;
  padding: 7 * $hd 16 * $hd;
  margin: 0;
  font-size: 15 * $hd;
  line-height: 1.4;
  text-align: center;
  border: 1 * $hd solid $font-color-main;
  border-radius: 4 * $hd;
  cursor: pointer;
  transition: opacity ease 0.15s;
  user-select: none;
  &:focus {
    outline: none;
  }
  &::before {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    background-color: #000;
    border: inherit;
    border-color: #000;
    border-radius: inherit;
    transform: translate(-50%, -50%);
    opacity: 0;
    content: ' ';
    box-sizing: content-box;
  }
  &:active::before {
    opacity: 0.1;
  }
  &-default {
    color: var(--color);
    background-color: #fff;
    border-color: $border-color;
    &.#{$class-prefix-button}-fill-outline {
      background-color: transparent;
      border-color: var(--color);
    }
    &.#{$class-prefix-button}-fill-none {
      background-color: transparent;
      border-color: transparent;
    }
  }
  &:not(&-default) {
    color: $font-color-white;
    background-color: var(--color);
    border-color: var(--color);
    &.#{$class-prefix-button}-fill-outline {
      color: var(--color);
      background-color: transparent;
    }
    &.#{$class-prefix-button}-fill-none {
      color: var(--color);
      background-color: transparent;
      border-color: transparent;
    }
  }
  &-primary {
    --color: var(--color-theme);
  }
  &-success {
    --color: #00b578;
  }
  &-danger {
    --color: #ff3141;
  }
  &-warning {
    --color: #ff8f1f;
  }

  &-block {
    display: flex;
    width: 100%;
  }

  &-disabled {
    cursor: not-allowed;
    opacity: 0.4;
    &:active::before {
      display: none;
    }
  }

  &-mini {
    padding: 3 * $hd 7 * $hd;
    font-size: 13 * $hd;
  }
  &-small {
    padding: 3 * $hd 11 * $hd;
    font-size: 15 * $hd;
  }
  &-large {
    padding: 11 * $hd 22 * $hd;
    font-size: 18 * $hd;
  }
  &-loading {
    vertical-align: bottom;
  }
  &-loading-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 21 * $hd;
  }
  &-small &-loading-wrapper {
    height: 18 * $hd;
  }
  &-large &-loading-wrapper {
    height: 25 * $hd;
  }
  &-round {
    border-radius: 999px;
  }
  &-loading-wrapper {
    display: flex;
    align-items: center;
  }
}
